<div class="bottom-panel-container">
  <div
    class="bottom-panel-header"
    #panelHeader
  >
    <div class="drag-handle"></div>
    <button
      mat-icon-button
      class="close-btn"
      (click)="close()"
    >
      <mat-icon>close</mat-icon>
    </button>
  </div>

  <div class="bottom-panel-content">
    @switch (panelContent()) {
      @case ('NOTES') {
        <notes></notes>
      }
      @case ('TASK') {
        @if (selectedTask(); as selectedTaskLocal) {
          <div
            class="ani-container"
            [@taskDetailPanelTaskChange]="
              isDisableTaskPanelAni() ? 'disabled' : selectedTaskLocal.id
            "
            [class.isDisableAni]="isDisableTaskPanelAni()"
          >
            <task-detail-panel [task]="selectedTaskLocal"></task-detail-panel>
          </div>
        }
      }
      @case ('ADD_TASK_PANEL') {
        <issue-panel></issue-panel>
      }
      @case ('ISSUE_PANEL') {
        <issue-panel></issue-panel>
      }
      @case ('TASK_VIEW_CUSTOMIZER_PANEL') {
        <task-view-customizer-panel></task-view-customizer-panel>
      }
      @case ('PLUGIN') {
        <plugin-panel-container></plugin-panel-container>
      }
    }
  </div>
</div>
